<template>
    <div class="M_container">
        <div class="D_down">
            <FullCalendar ref="myCalendar" 
            :options="calendarOptions" 
            />
        </div>
    </div>
</template>
 
<script>
//此插件坑较多  版本众多 vue版很多配置需另找 中文翻译： http://mad-man.gitee.io/fullcalendar-site-static/docs/intro
import moment from 'moment'
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";

export default {
    name: "index",
    components: {
        FullCalendar,
    },
    data() {
        return {
            calendarOptions: {
                plugins: [
                    dayGridPlugin,
                    interactionPlugin,
                    timeGridPlugin,
                    listPlugin,
                ],//默认引入
                initialView: "timeGridWeek",//默认模式
                firstDay: 1,//开始日期
                locale: "zh-cn",//语言
                allDaySlot: false, // 周，日视图时，all-day 不显示
                headerToolbar: {
                    // 日历头部按钮位置
                    left: "",
                    center: "prev title next",
                    right: "",
                },
                height:825,//日历高度
                slotMinTime: '07:00', //开始时间
                slotMaxTime: '24:00',  //结束时间
                slotLabelFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    meridiem: false,
                    hour12: false // 设置时间为24小时
                },
                titleRangeSeparator: '至', //两个日期之间的文本
                eventTimeFormat: { 
                    hour: '2-digit',
                    minute: '2-digit',
                    meridiem: false,
                    hour12: false //设置时间为24小时
                },
                eventColor: '#CBECFF',
                eventTextColor: '#00a4ff',
                events: [
                  {
                    title: '测试1',
                    start: '2021-09-25T10:00',
                    end: '2021-09-25T11:00',
                  },
                  {
                    title: '测试2',
                    start: '2021-09-25T16:00',
                    end: '2021-09-25T18:00',
                  },
                ],
            },
        };
    },
    created(){
        this.test()
    },
    methods: {
        handleEventClick(info) {
            console.log(info);
        },
        test(){
            let a = '测试撒大打实打实'
            let b = '老师'
            let obj = {
               title :  `${a}\n${b}`,
               start: '2021-09-26T10:00',
               end: '2021-09-26T11:00',
            }
            this.calendarOptions.events.push(obj)
        }
    },
};
</script>

<style lang="scss" scoped>

.M_container {
    width: 100%;
    height: calc(100vh - 130px);
    display: flex;
    .D_down {
        width: 860px;
        margin-top: 10px;
        height: auto;
        overflow-y: auto;
        > ul {
            list-style: none;
            padding: 0;
            margin: 5px 0 0 0;
            float: right;
            width: 20%;
            display: flex;
            justify-content: space-around;
            font-family: "Source Han Sans CN Medium";
            font-size: 13px;
            > li {
                width: 30%;
            }
        }

        //日历样式
        ::v-deep .fc .fc-toolbar-title {
            font-size: 15px !important;
            font-family: "Source Han Sans CN Regular";
            line-height: 24px;
        }
        ::v-deep .fc .fc-button {
            padding: 0;
        }
        ::v-deep .fc-toolbar-chunk {
            display: flex;
            margin: 0 0 5px 0;
        }
        ::v-deep .fc .fc-toolbar.fc-header-toolbar {
            margin-bottom: 16px;
        }
        ::v-deep .fc .fc-col-header-cell-cushion {
            font-size: 15px;
            font-family: "Source Han Sans CN Regular";
            color: #333;
        }
        ::v-deep .fc .fc-timegrid-slot-label-cushion {
            font-size: 13px;
            font-family: "Source Han Sans CN Regular";
        }
        ::v-deep .fc .fc-view-harness {
            height: 360px !important;
            overflow: auto;
        }

        ::v-deep .fc .fc-col-header-cell {
            background-color: #f6fcf2;
        }

        ::v-deep .fc .fc-scrollgrid-sync-inner {
            height: 44px;
        }

        ::v-deep .fc .fc-col-header-cell-cushion {
            margin-top: 10px;
        }

        ::v-deep .fc .fc-toolbar-title {
            width: 240px;
	        height: 40px;
	        background-color: #ffffff;
	        border-radius: 4px;
	        border: solid 1px #d8dce6;
            text-align: center;
            line-height: 38px;
            font-size: 14px;
            color: #606266;
        }

        ::v-deep .fc .fc-button-primary {
            border: 0;
            background-color: #fff;
            overflow: hidden;
        }

        ::v-deep .fc .fc-toolbar-chunk{
            color: black;
        }

        ::v-deep .fc .fc-icon {
	        width: 100%;
	        color: #909399;
        }

        ::v-deep .fc .fc-timegrid-slot {
            height: 28.5px;
            border-style:solid;
        }

        ::v-deep .fc .fc-timegrid-slot-minor{
            border: 0;
        }

        ::v-deep .fc .fc-timegrid-slot-label{
            width: 80px;
            border: 0;
        }
        ::v-deep .fc .fc-timegrid-axis{
            width: 80px;
        }

        ::v-deep .fc col{
            width: 80px !important;
        }

        ::v-deep .fc .fc-col-header {
            background-color: #f6fcf2;
        }

        ::v-deep .fc .fc-timegrid-slot-label-cushion{
            transform: translate(-20px,10px);
            font-size: 14px;
            color: #0e1a00;
        }

        ::v-deep .fc .fc-event-title-container{
            white-space: pre-wrap; //识别\n换行
        }

        ::v-deep .fc .fc-event-main-frame{
            flex-direction:column-reverse;
            justify-content: flex-end;
        }
    }
}
</style>